<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>九宫格+文章列表首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 15px;
        }

        /* 头部样式 */
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding: 10px 0;
        }

        .header h1 {
            font-size: 24px;
            color: #333;
            margin-bottom: 5px;
        }

        /* 九宫格样式 */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 25px;
        }

        .grid-item {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #333;
            transition: all 0.3s ease;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }

        .grid-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .grid-item i {
            font-size: 28px;
            margin-bottom: 8px;
            color: #4a90e2;
        }

        .grid-item .badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #ff4757;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid-item span {
            font-size: 14px;
            text-align: center;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 文章列表样式 */
        .article-section {
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-title a {
            font-size: 14px;
            color: #4a90e2;
            text-decoration: none;
        }

        .article-list {
            display: grid;
            gap: 15px;
        }

        .article-item {
            display: flex;
            gap: 12px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        .article-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .article-img {
            width: 100px;
            height: 70px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .article-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .article-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
        }

        .article-author {
            display: flex;
            align-items: center;
        }

        .article-author img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 5px;
        }

        /* 底部样式 */
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #999;
            font-size: 12px;
            padding: 20px 0;
        }

        /* 加载Font Awesome图标库 */
        @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

        /* 响应式调整 */
        @media (max-width: 600px) {
            .grid-item i {
                font-size: 24px;
            }

            .grid-item span {
                font-size: 12px;
            }

            .article-item {
                flex-direction: column;
            }

            .article-img {
                width: 100%;
                height: 120px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 头部 -->
    <div class="header">
        <h1>应用中心</h1>
        <p>快速访问常用功能</p>
    </div>

    <!-- 九宫格导航 -->
    <div class="grid-container">
        <a href="#" class="grid-item">
            <i class="fas fa-user"></i>
            <span>个人中心</span>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-shopping-cart"></i>
            <span>购物商城</span>
            <div class="badge">3</div>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-comments"></i>
            <span>消息中心</span>
            <div class="badge">12</div>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-image"></i>
            <span>相册</span>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-map-marker-alt"></i>
            <span>位置服务</span>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-cog"></i>
            <span>系统设置</span>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-calendar-alt"></i>
            <span>日历</span>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-file-alt"></i>
            <span>文档</span>
        </a>

        <a href="#" class="grid-item">
            <i class="fas fa-ellipsis-h"></i>
            <span>更多</span>
        </a>
    </div>

    <!-- 文章列表 -->
    <div class="article-section">
        <div class="section-title">
            <span>热门文章</span>
            <a href="#">查看更多 <i class="fas fa-angle-right"></i></a>
        </div>

        <div class="article-list">
            <!-- 文章项1 -->
            <div class="article-item">
                <img src="https://via.placeholder.com/100x70?text=封面1" alt="文章封面" class="article-img">
                <div class="article-content">
                    <h3 class="article-title">如何快速掌握前端开发技巧：2023年最新学习路径指南</h3>
                    <div class="article-meta">
                            <span class="article-author">
                                <img src="https://via.placeholder.com/16x16?text=头像" alt="作者头像">
                                前端小助手
                            </span>
                        <span>2023-07-15</span>
                    </div>
                </div>
            </div>

            <!-- 文章项2 -->
            <div class="article-item">
                <img src="https://via.placeholder.com/100x70?text=封面2" alt="文章封面" class="article-img">
                <div class="article-content">
                    <h3 class="article-title">Vue 3.0全面解析：从入门到实战项目开发</h3>
                    <div class="article-meta">
                            <span class="article-author">
                                <img src="https://via.placeholder.com/16x16?text=头像" alt="作者头像">
                                Vue专家
                            </span>
                        <span>2023-07-10</span>
                    </div>
                </div>
            </div>

            <!-- 文章项3 -->
            <div class="article-item">
                <img src="https://via.placeholder.com/100x70?text=封面3" alt="文章封面" class="article-img">
                <div class="article-content">
                    <h3 class="article-title">移动端适配全攻略：从响应式布局到REM方案实践</h3>
                    <div class="article-meta">
                            <span class="article-author">
                                <img src="https://via.placeholder.com/16x16?text=头像" alt="作者头像">
                                移动开发达人
                            </span>
                        <span>2023-07-05</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <p>© 2023 九宫格+文章列表首页 · 版本 1.0.0</p>
    </div>
</div>

<script>
    // 九宫格点击事件
    document.querySelectorAll('.grid-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const text = this.querySelector('span').textContent;
            console.log(`点击了: ${text}`);

            // 实际项目中可以取消下面的注释，进行页面跳转
            // window.location.href = this.getAttribute('href');
        });
    });

    // 文章点击事件
    document.querySelectorAll('.article-item').forEach(item => {
        item.addEventListener('click', function() {
            const title = this.querySelector('.article-title').textContent;
            console.log(`点击了文章: ${title}`);
            // window.location.href = '/article/detail';
        });
    });

    // 模拟数据加载
    window.addEventListener('DOMContentLoaded', () => {
        console.log('页面加载完成');

        // 这里可以添加从API获取数据的代码
        // fetchArticles();
    });

    // 示例：获取文章数据
    function fetchArticles() {
        // fetch('/api/articles')
        //     .then(response => response.json())
        //     .then(data => {
        //         console.log('获取到文章数据:', data);
        //         renderArticles(data);
        //     })
        //     .catch(error => {
        //         console.error('获取文章失败:', error);
        //     });
    }

    // 示例：渲染文章数据
    function renderArticles(articles) {
        // 实际项目中根据API返回的数据动态生成文章列表
    }
</script>
</body>
</html>